import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import Caption from '~/components/text/caption'
import Link from '~/components/text/link'
import { Image } from '~/components/media'
import { InlineCode } from '~/components/text/code'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Deploy Docusaurus Sites with ZEIT Now',
  description:
    'Docusaurus with ZEIT Now makes it easy to create and deploy open source project documentation.',
  published: '2019-10-09T12:00:00.860Z',
  authors: ['msweeneydev'],
  url: '/guides/deploying-docusaurus-with-zeit-now',
  example: 'docusaurus',
  demo: 'https://docusaurus.now-examples.now.sh',
  image:
    'https://og-image.now.sh/**Deploy%20Docusaurus%20Sites**%20%3Cbr%2F%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fv2.docusaurus.io%2Fimg%2Fdocusaurus_keytar.svg&widths=250&widths=350&heights=250&heights=300',
  editUrl: 'pages/guides/deploying-docusaurus-with-zeit-now.mdx',
  name: 'Docusaurus',
  type: 'site',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[Docusaurus](https://docusaurus.io/) is a documentation framework that makes it easy to maintain open source documentation websites.

## Step 1: Set Up Your Docusaurus Project

Firstly, [set up a Docusaurus project](https://docusaurus.io/docs/en/tutorial-setup#install-the-docusaurus-init-command) by installing the Docusaurus CLI globally from your terminal:

<Snippet dark text="npm i -g docusaurus-init" />
<Caption>Installing <Link href="https://docusaurus.io/docs/en/tutorial-setup#install-the-docusaurus-init-command">docusaurus-init</Link> globally with <Link href="https://www.npmjs.com/">npm</Link>.</Caption>

Create and move into a directory for your Docusaurus website:

<Snippet dark text="mkdir my-docs && cd my-docs" />
<Caption>Creating and entering into the <InlineCode>/my-docs</InlineCode> directory.</Caption>

Run the following command to create a Docusaurus project inside of the `/my-docs` directory:

<Snippet dark text="docusaurus-init && cd website" />
<Caption>Creating a Docusaurus project with the Docusaurus CLI and entering into the <InlineCode>/website</InlineCode> directory.</Caption>

You will find that the Docusaurus CLI has created both a `/docs` and `/website` directory. Move the `/docs` directory inside of the `/website` directory, you can edit its contents later to provide your own documentation.

Add the following two lines of code to the `/website/siteConfig.js` file:

```diff
// See https://docusaurus.io/docs/site-config for all the possible
// site configuration options.
+ const path = require('path');

// List of projects/orgs using your project for the users page.
const users = [
  {
    caption: 'User1',
    // You will need to prepend the image path with your baseUrl
    // if it is not '/', like: '/test-site/img/image.jpg'.
    image: '/img/undraw_open_source.svg',
    infoLink: 'https://www.facebook.com',
    pinned: true,
  },
];

const siteConfig = {
+  customDocsPath: path.basename(__dirname) + '/docs',
```

<Caption>
  Specifying the <InlineCode>/docs</InlineCode> path in the{' '}
  <InlineCode>/website/siteConfig.js</InlineCode> file.
</Caption>

Adding these two lines tells Docusaurus to use the `path` module to define where the `/docs` folder is located.

## Step 2: Deploying Your Docusaurus Website with ZEIT Now

<DeploySection meta={meta} />

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
